<template>
  <el-dialog
    title="文件列表"
    :visible.sync="visible"
    width="900px"
    @close="handleClose"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <div class="file-container">
      <el-table :data="list" tooltip-effect="light">
        <el-table-column type="index" width="60" align="center" label="序号">
        </el-table-column>
        <el-table-column
          prop="fileName"
          label="文件名"
          min-width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="上传时间"
          min-width="100"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="text" @click="handlePreview(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
const Base64 = require("js-base64").Base64;
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleClose() {
      this.$emit("update:visible", false);
    },
    handlePreview(file) {
      if (file) {
        const path = file.fileUrl;
        let lastUrl = "";
        if (path.indexOf("file=") != -1) {
          // 文件名
          const fileName = path.split("file=")[1];
          // 后缀名
          const suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
          // 编码文件名（不含扩展名）, 去掉=号
          const encodeFileName = Base64.encode(
            fileName.substring(0, fileName.lastIndexOf(".") + 1)
          ).replace("=", "");
          lastUrl = encodeURIComponent(
            Base64.encode(
              path + "&fullfilename=" + encodeFileName + "." + suffix
            )
          );
        } else {
          lastUrl = encodeURIComponent(Base64.encode(path));
        }
        window.open(
          "http://wk.yl1001.com/preview/onlinePreview?url=" + lastUrl
        );
      }
    },
  },
};
</script>

<style lang="less" scoped>
.file-container {
  max-height: 450px;
  overflow-y: scroll;
}
</style>
